<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="include/header.jsp" %>
<head>
    <script src="${pageContext.request.contextPath}/js/admin/admin_login.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/admin/admin_login.css"/>
    <title>WolfCode Mall管理后台 - 登录</title>
    <style>
        .form_control1{
            width: 60%;
            right: 0;
        }
        .img-thumbnail{
            margin-left: 15px;
            position:absolute;
            top : 0;
            right: 0px;
        }
    </style>
</head>
<body>
<div id="div_background">
    <div id="div_nav">
        <span id="txt_date"></span>
        <span id="txt_peel">换肤</span>
        <ul id="div_peelPanel">
            <li value="url(${pageContext.request.contextPath}/images/admin/loginPage/background-1.jpg)">
                <img src="${pageContext.request.contextPath}/images/admin/loginPage/background-mini-1.jpg"/>
            </li>
            <li value="url(${pageContext.request.contextPath}/images/admin/loginPage/background-2.jpg)">
                <img src="${pageContext.request.contextPath}/images/admin/loginPage/background-mini-2.jpg"/>
            </li>
            <li value="url(${pageContext.request.contextPath}/images/admin/loginPage/background-3.jpg)">
                <img src="${pageContext.request.contextPath}/images/admin/loginPage/background-mini-3.jpg"/>
            </li>
            <li value="url(${pageContext.request.contextPath}/images/admin/loginPage/background-4.jpg)">
                <img src="${pageContext.request.contextPath}/images/admin/loginPage/background-mini-4.jpg"/>
            </li>
            <li value="url(${pageContext.request.contextPath}/images/admin/loginPage/background-5.jpg)">
                <img src="${pageContext.request.contextPath}/images/admin/loginPage/background-mini-5.jpg"/>
            </li>
        </ul>
    </div>
    <div id="div_main">
        <div id="div_head"><p>WolfCode Mall <span>管理后台</span></p></div>
        <div id="div_content">
            <img id="img_profile_picture"
                 src="${pageContext.request.contextPath}/images/admin/loginPage/default_profile_picture-128x128.png"
                 alt="头像" title="头像"
                 onerror="this.src='${pageContext.request.contextPath}/images/admin/loginPage/default_profile_picture-128x128.png'"/>
            <form id="form_login" action="/admin/doLogin" method="post">
                <div class="form-group has-feedback">
                <input type="text" class="form-control form_control" placeholder="用户名" id="username" name="username" title="请输入用户名"/>
                </div>
                <div class="form-group has-feedback">
                    <input type="password" class="form-control form_control" placeholder="密码" id="password" name="password" title="请输入密码" autocomplete="on">
                </div>
                <div class="form-group has-feedback">

                <input type="text" class="form-control form_control form_control1" placeholder="验证码" id="verifycode" name="verifycode" title="请输入密码" autocomplete="on">
                <img src="/admin/getVerifyCode" id="verifycodeimg" class="img-thumbnail">
                <span id="txt_error_msg">${errorMsg}</span>
                </div>
                <input type="submit" class="btn btn-danger" id="btn_login" value="登录"/>
            </form>
        </div>
    </div>
</div>
<script>
    //点击验证码图片，切换验证码
    $(function () {
        //为验证码图片添加点击事件
        $("#verifycodeimg").click(function () {
            //重新请求验证码
            this.src = "/admin/getVerifyCode?" + new Date().getMilliseconds()
        })
    })
</script>
</body>